<template>
  <div ref="canvasContainer" class="canvas-container">
    <canvas ref="canvas" class="canvas"></canvas>
  </div>
</template>

<script>
export default {
  name: 'CanvasTool',
  data() {
    return {
      canvas: null,
      ctx: null,
      isDrawing: false,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      rectangles: [],
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.resizeCanvas();
    window.addEventListener('resize', this.resizeCanvas);

    this.canvas.addEventListener('mousedown', this.startDrawing);
    this.canvas.addEventListener('mousemove', this.draw);
    this.canvas.addEventListener('mouseup', this.stopDrawing);
    this.canvas.addEventListener('mouseout', this.stopDrawing);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
    this.canvas.removeEventListener('mousedown', this.startDrawing);
    this.canvas.removeEventListener('mousemove', this.draw);
    this.canvas.removeEventListener('mouseup', this.stopDrawing);
    this.canvas.removeEventListener('mouseout', this.stopDrawing);
  },
  computed: {
    // 当前播放的视频对象
    currentVideo() {
      return this.$store.getters['playVideo/getCurrentPlayingVideo'];
    },
  },
  methods: {
    resizeCanvas() {
      this.canvas.width = this.$refs.canvasContainer.clientWidth;
      this.canvas.height = this.$refs.canvasContainer.clientHeight;
    },
    startDrawing(e) {
      this.isDrawing = true;
      this.startX = e.offsetX;
      this.startY = e.offsetY;
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.endX = e.offsetX;
      this.endY = e.offsetY;
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.rectangles.forEach((rect) => {
        this.ctx.strokeStyle = 'red';
        this.ctx.strokeRect(rect.startX, rect.startY, rect.width, rect.height);
      });
      this.ctx.strokeStyle = 'red';
      this.ctx.strokeRect(
        this.startX,
        this.startY,
        this.endX - this.startX,
        this.endY - this.startY
      );
    },
    stopDrawing() {
      if (!this.isDrawing) return;
      this.isDrawing = false;
      const rect = {
        startX: this.startX,
        startY: this.startY,
        width: this.endX - this.startX,
        height: this.endY - this.startY,
      };
      this.rectangles.push(rect);
      this.$emit('rectangleDrawn', rect); // 触发回调
      this.sendMessage(this.rectangles);
    },
    // 发送信息给websocket
    sendMessage(message) {
      this.$store.dispatch('websocketClient/sendMessage', {
        ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
        message: {
          cameraId: this.currentVideo.cameraId,
          command: message,
        },
      });
    },
  },
};
</script>

<style scoped>
.canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* 确保鼠标事件可以触发 */
}

.canvas {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>
